﻿@page "/features/breakpoints"

<DocsPage MaxWidth="MaxWidth.Large">
    <DocsPageHeader Title="Breakpoints" SubTitle="Breakpoints help you control your layout based upon windows size.">
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <MudPaper Elevation="0" Outlined="true">
                <MudText Typo="Typo.h5" GutterBottom="true" Class="ma-4">Material Design Breakpoints</MudText>
                <MudSimpleTable Elevation="0" Hover="true" Class="mt-4">
                    <thead>
                        <tr>
                            <th>Device</th>
                            <th>Code</th>
                            <th>Type</th>
                            <th>Range</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <MudIcon Icon="@Icons.Material.Filled.PhoneIphone" Class="mb-n1" />
                                <MudText Inline="true">Extra small</MudText>
                            </td>
                            <td>xs</td>
                            <td>Small to large phone</td>
                            <td>&lt; 600px</td>
                        </tr>
                        <tr>
                            <td>
                                <MudIcon Icon="@Icons.Material.Filled.StayCurrentLandscape" Class="mb-n1 mr-1" />
                                <MudText Inline="true">Small</MudText>
                            </td>
                            <td>sm</td>
                            <td>Small to medium tablet</td>
                            <td>600px > &lt; 960px</td>
                        </tr>
                        <tr>
                            <td>
                                <MudIcon Icon="@Icons.Material.Filled.Laptop" Class="mb-n1 mr-1" />
                                <MudText Inline="true">Medium</MudText>
                            </td>
                            <td>md</td>
                            <td>Large tablet to laptop</td>
                            <td>960px > &lt; 1280px</td>
                        </tr>
                        <tr>
                            <td>
                                <MudIcon Icon="@Icons.Material.Filled.DesktopWindows" Class="mb-n1 mr-1" />
                                <MudText Inline="true">Large</MudText>
                            </td>
                            <td>lg</td>
                            <td>Desktop</td>
                            <td>1280px > &lt; 1920px</td>
                        </tr>
                        <tr>
                            <td>
                                <MudIcon Icon="@Icons.Material.Filled.Tv" Class="mb-n1 mr-1" />
                                <MudText Inline="true">Extra Large</MudText>
                            </td>
                            <td>xl</td>
                            <td>4k and ultra-wide</td>
                            <td>> 1920px*</td>
                        </tr>
                    </tbody>
                </MudSimpleTable>
            </MudPaper>
        </DocsPageSection>
        <DocsPageSection>
            <MudText Typo="Typo.h4" GutterBottom="true">MudGrid</MudText>
            <MudText>Utilizes the screen resolution and a 12 point grid system for its layout. With the 5 breakpoints you can specify the layout order on different window sizes.</MudText>
            <MudText>Read more about <MudLink Href="/components/grid">MudBlazor's Grid component here,</MudLink> you will also find different examples and how to use cases.</MudText>

            <MudText Typo="Typo.h4" GutterBottom="true">MudHidden</MudText>
            <MudText>Instead of layout order you can determen what should be rendered or not depending on the window size and applied breakpoint.</MudText>
            <MudText>Read more about <MudLink Href="/components/hidden">MudBlazor's Hidden component here.</MudLink></MudText>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>